<template>
<!--    新闻内容页面-->
    <div>
<!--        标题-->
        <div class="news_title">
            <van-row type="flex" justify="space-between">
                <van-col span="2">
                    <router-link v-show="$store.state.favorite==0" to="/Index">
                        <van-icon name="arrow-left" size="30" color="white" />
                    </router-link>
                    <router-link v-show="$store.state.favorite==1" to="/Search">
                        <van-icon name="arrow-left" size="30" color="white" />
                    </router-link>
                    <router-link v-show="$store.state.favorite==2" to="/SearchContent">
                        <van-icon name="arrow-left" size="30" color="white" />
                    </router-link>
                    <router-link v-show="$store.state.favorite==3" to="/collection">
                        <van-icon name="arrow-left" size="30" color="white" />
                    </router-link>
                </van-col>
                <van-col span="14">
                    <h4>NEWS新闻</h4>
                </van-col>
                <van-col span="2">
                    <router-link to="/Search">
                        <van-icon name="search" size="30" />
                    </router-link>
                </van-col>
            </van-row>
        </div>
<!--        内容-->
        <div class="news_content" >
            <!--       骨架屏-->
            <div v-if="loading">
                <van-skeleton title :row="20"/>
            </div>

            <div>
                <h3 style="text-align: center">{{news.title}}</h3>
                <div style="line-height: 21px;color: #888888">
                    <van-row type="flex" justify="space-between" style="margin-top: 10px;text-align: center" >
                        <van-col span="16">
                            <span>
                                {{news.articleSource}}
                            </span>
                            <span>
                                {{sendTime}}
                            </span>
                        </van-col>
                    </van-row>
                </div>
                <van-divider />
                <div v-html="content" class="content"></div>
            </div>
            <van-divider style="margin-bottom: 40px">好文章，值得推荐给更多人</van-divider>
        </div>

        <!--        点赞收藏-->
        <div class="zan" style="text-align: left">
            <div class="dianzan" @click="dianzan">
                点赞
                <span>{{zanNumber}}</span>
                <van-icon name="good-job" v-if="islogin&&zanflag" style="vertical-align: initial;"  color="red" />
                <van-icon name="good-job-o" v-else style="vertical-align: initial;" />
<!--                <van-icon />-->
            </div>
            <div class="shoucang" @click="addCollect">
                收藏
                <van-icon name="like" style="vertical-align: initial;" v-if="islogin&&this.collectflag" color="red" />
                <van-icon name="like-o" style="vertical-align: initial;" v-else />
            </div>
            <div class="guankan">
                观看:{{readNum}}
                <van-icon name="browsing-history-o" style="vertical-align: initial;" />
            </div>
        </div>
    </div>
</template>

<script>
// <!--    获取新闻详情，     点赞,    阅读量    收藏文章-->
    import {getNewsContent,dianZan,addRead,collectNews} from "../../../api/GoodNews";
    import {collection} from "../../../api/user-api";
    import moment from 'moment'
    import {mapState} from 'vuex'
    import { Dialog } from 'vant';

    export default {
        name: "NewsPage",
        data(){
            return{
                news:{},
                content:'',
                sendTime:'',
                agoTime:'',
                loading: true,
                //赞判断
                zanflag:false,
                //阅读量
                readNum:'',
                //收藏判断
                collectflag:false,
            }
        },
        created() {
            this.$store.dispatch("getUserInfo1")
            this.$store.dispatch("getCollectionList")

            addRead(this.$route.params.newsid).then(res=>
            {
            })
            //收藏列表
            //如果已经收藏一上来就显示收藏红色
            collection().then(res=>{
                res.rows.forEach(item=>{
                    if (item.articleId==this.$route.params.newsid){
                        this.collectflag = true
                    }
                })
            })
            getNewsContent(this.$route.params.newsid).then(res=>{
                this.news = res.data
                this.content = this.news.content
                this.sendTime = this.news.sendTime
                this.sendTime = moment(this.sendTime).format('MM/DD H:mm');
                this.agoTime = this.news.sendTime
                this.$store.commit('ReSendTime',{SendTime:this.agoTime})
                this.loading = false
                this.$store.commit('ReZanNumber',{zanNumber:res.data.zan})
                this.readNum = res.data.readNum
            })
        },
        computed:{
            ...mapState({
                islogin:'islogin',
                zanNumber:'zanNumber',
            })
        },
        methods:{
            //点赞功能
            dianzan(){
                //判断是否为登录成功状态
                if (this.islogin){
                        this.zanflag = !this.zanflag
                        if (this.zanflag){
                            //触发调用点赞接口
                            dianZan(this.$route.params.newsid).then(
                                res=>{
                                    // console.log(res)
                                    //如果点赞成功（返回值为0），调用获取新闻详情接口，存储点赞数量
                                    if (res.code===0){
                                        this.$toast({
                                            message: '点赞成功！',
                                            icon: 'good-job',
                                        });
                                        getNewsContent(this.$route.params.newsid).then(
                                            res=>{
                                                this.$store.commit('ReZanNumber',{zanNumber:res.data.zan})
                                            }
                                        )
                                    }
                                }
                            )
                        }
                }
                else {
                    Dialog();
                    Dialog.confirm({
                        title: '提示',
                        message: '你您还未登录，请先去登录',
                    })
                        .then(() => {
                            // console.log(888)
                            this.$router.push('/login')
                        })
                        .catch(() => {
                            // console.log('取消了')
                        });
                }
            },
            addCollect(){
                    if (this.islogin){
                        if (this.news.isCollect==false){
                            this.collectflag=true
                            collectNews(this.$route.params.newsid).then(
                                res=>{
                                    if (res.code ===0){
                                        this.$toast({
                                            message: '收藏成功！',
                                            icon: 'like-o',
                                        });
                                    }
                                }
                            )
                        }
                        else if (this.news.isCollect==true){
                            Dialog();
                            Dialog.confirm({
                                title: '提示',
                                message: '您确定要取消收藏吗?T_T',
                            })
                                .then(() => {
                                    this.collectflag = !this.collectflag
                                    collectNews(this.$route.params.newsid).then(
                                        res=>{
                                            if (res.code ==0){
                                                this.collectflag=false
                                                this.$toast({
                                                    message: '取消收藏成功！',
                                                    icon: 'like-o',
                                                });
                                            }
                                        }
                                    )
                                    // console.log(this.news)
                                    // this.news.isCollect = false
                                    // this.$router.push('/login')
                                })
                                .catch(() => {
                                    // console.log('取消了')
                                });
                        }
                    }
                    else {
                        Dialog();
                        Dialog.confirm({
                            title: '提示',
                            message: '你您还未登录，请先去登录',
                        })
                            .then(() => {
                                // console.log(888)
                                this.$router.push('/login')
                            })
                            .catch(() => {
                                // console.log('取消了')
                            });
                    }
            },
        }
    }
</script>

<style scoped lang="less">
.news_title{
    height: 50px;
    line-height: 30px;
    padding: 10px;
    text-align: center;
    font-size: 22px;
    background-color: #FD7304;
    color: white;
}
    .news_content{
        padding: 15px 10px 0px 10px;
        width: 100%;
       /deep/img{
            width: 100%;
        }
        .content{
            font-size: 18px;
            margin-top:20px ;
            padding: 0 10px;
            /deep/p{
                text-indent: 2em;
                margin: 10px 0;
                img{
                    margin-left: -35px;
                }
            }
            /deep/img{
                margin-top: 15px;
            }
        }
    }
    .zan{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: -1px;
        height: 40px;
        line-height: 40px;
        background-color: #C7C7C7;
        /*text-align: center;*/
        .dianzan{
            position: absolute;
            left: 10px;
        }
        .shoucang{
            position: absolute;
            left: 80px;
        }
        .guankan{
            position: absolute;
            right: 10px;
        }
    }
</style>